<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>销售订单</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/app.css" rel="stylesheet" />
	</head>

	<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="app" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar">

				</div>
				<div class="mui-pages">

					<nav class="mui-bar mui-bar-tab">
						<a class="mui-tab-item goHome mui-active" href="javascript:;">
							<span class="mui-icon mui-icon-home"></span>
							<span class="mui-tab-label">首页</span>
						</a>
						<a class="mui-tab-item" href="javascript:;">
							<span class="mui-icon mui-icon-camera"></span>
							<span class="mui-tab-label">摄像头</span>
						</a>
						<a class="mui-tab-item goHome" href="javascript:;">
							<span class="mui-icon mui-icon-person"></span>
							<span class="mui-tab-label">服务</span>
						</a>
					</nav>

				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="setting" class="mui-page">
			<!--页面标题栏开始-->
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<h1 class="mui-center mui-title">销售订单</h1>
				<a href="#order_add" type="button" class="mui-btn mui-btn-grey mui-btn-outlined mui-pull-right" style="padding: 5px;color: #333;" id="orderAdd">新增</a>
			</div>
			<!--页面标题栏结束-->
			<!--页面主内容区开始-->
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">

						<ul class="mui-table-view">
							<h4 style="padding: 15px 15px 10px;border-bottom: 1px solid #ccc;margin-bottom: 0;">全部订单</h4>
							<li class="mui-table-view-cell mui-collapse">
								<a class="mui-navigate-right" href="#">1</a>
								<div class="mui-collapse-content">
									<p>1子内容</p>
								</div>
							</li>
							<li class="mui-table-view-cell mui-collapse">
								<a class="mui-navigate-right" href="#">2</a>
								<div class="mui-collapse-content">
									<p>2子内容</p>
								</div>
							</li>
							<li class="mui-table-view-cell mui-collapse">
								<a class="mui-navigate-right" href="#">3</a>
								<div class="mui-collapse-content">
									<p>3子内容</p>
								</div>
							</li>
						</ul>

					</div>
				</div>
			</div>
			<!--页面主内容区结束-->
		</div>
		<!--单页面结束-->
		<div id="order_add" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<h1 class="mui-center mui-title">新增订单</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll" style="height: 94%;">

						<ul class="mui-table-view" id="order_car">
							<style>
								#order_car input {
									top: 30px;
								}
								
								#order_car a {
									padding-left: 60px;
								}
								
								#order_car .mui-numbox {
									position: absolute;
									right: 10px;
									bottom: 10px;
									height: 30px!important;
								}
								
								#order_car strong {
									position: absolute;
									top: 15px;
									right: 25px;
								}
								
								#order_car.mui-table-view .mui-media-object {
									line-height: 70px;
									max-width: 70px;
									height: 70px;
								}
							</style>
							<li class="mui-table-view-cell mui-media">
								<a href="javascript:;" class="mui-checkbox mui-left">
									<input name="Checkbox" type="checkbox">
									<img class="mui-media-object mui-pull-left" width="100px" height="100px" src="images/iconfont-tianjia.png">
									<div class="mui-media-body">
										title
										<p class="mui-ellipsis">content</p>
										<p class="mui-ellipsis">Des</p>
									</div>
								</a>
								<strong>￥100</strong>
								<div class="mui-numbox" data-numbox-step='1' data-numbox-min='1' data-numbox-max='10'>
									<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
									<input class="mui-input-numbox" type="number" />
									<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
								</div>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a href="javascript:;" class="mui-checkbox mui-left">
									<input name="Checkbox" type="checkbox" checked>
									<img class="mui-media-object mui-pull-left" width="100px" height="100px" src="images/iconfont-tianjia.png">
									<div class="mui-media-body">
										title
										<p class="mui-ellipsis">content</p>
										<p class="mui-ellipsis">Des</p>
									</div>
								</a>
								<strong>￥100</strong>
								<div class="mui-numbox" data-numbox-step='1' data-numbox-min='1' data-numbox-max='10'>
									<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
									<input class="mui-input-numbox" type="number" />
									<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
								</div>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a href="javascript:;" class="mui-checkbox mui-left">
									<input name="Checkbox" type="checkbox">
									<img class="mui-media-object mui-pull-left" width="100px" height="100px" src="images/iconfont-tianjia.png">
									<div class="mui-media-body">
										title
										<p class="mui-ellipsis">content</p>
										<p class="mui-ellipsis">Des</p>
									</div>
								</a>
								<strong>￥100</strong>
								<div class="mui-numbox" data-numbox-step='1' data-numbox-min='1' data-numbox-max='10'>
									<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
									<input class="mui-input-numbox" type="number" />
									<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
								</div>
							</li>
						</ul>

						<footer style="position: fixed;left: 0;bottom: 0;padding: 0;width: 100%;border-top: 1px solid #ccc;">
							<div class="mui-input-row mui-checkbox mui-left" style="width: 65%;">
								<label>全选</label>
								<input name="checkbox1" type="checkbox">
								<span style="position: absolute;right: 0;top: 10px;font-size: 15px;">
									合计：￥100.00
								</span>
							</div>
							<div style="position: absolute;right: 0;bottom: -10px;">
								<a href="#order_confirm" type="button" class="mui-btn mui-btn-grey mui-btn-block">结算</a>
							</div>
						</footer>

					</div>

				</div>
			</div>
		</div>

		<div id="order_confirm" class="mui-page feedback">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<h1 class="mui-center mui-title">确认订单</h1>
			</div>
			<div class="mui-page-content">
				<ul class="mui-table-view" id="customer_bar">
					<style>
						#order_confirm li p {
							font-size: 16px;
							line-height: 30px;
						}
						
						#order_confirm li p.del:last-child {
							text-align: right;
							padding: 5px 0;
							margin: 5px 0 -10px;
							border-top: 1px solid #dedede;
						}
						
						#order_confirm li p.del:last-child span {
							padding-left: 15px;
							font-size: 14px
						}
						
						#order_confirm strong {
							position: absolute;
							top: 15px;
							right: 25px;
						}
						
						#order_confirm .mui-media-object {
							line-height: 70px;
							max-width: 70px;
							height: 70px;
						}
					</style>
					<li class="mui-table-view-cell">
						<a href="/" class="mui-navigate-right">
							<p>客户1<span style="margin-left: 50px;">123456</span></p>
							<p>Add：zxzxzxzx</p>
						</a>
						<p class="del"><span>编辑</span><span>删除</span></p>
					</li>
					<li class="mui-table-view-cell mui-media">
						<strong>￥100</strong>
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="images/iconfont-tianjia.png">
							<div class="mui-media-body">
								title
								<p class="mui-ellipsis">content</p>
								<p class="mui-ellipsis">Des</p>
							</div>
						</a>
					</li>
					        <li class="mui-table-view-cell">
					            <a class="mui-navigate-right">
									支付方式<span class="mui-badge mui-badge-primary">在线</span>
					            </a>
					        </li>
					        <li class="mui-table-view-cell">
					            <a class="mui-navigate-right">
									物流<span class="mui-badge mui-badge-primary">德邦</span>
					            </a>
					        </li>





				</ul>
			</div>
		</div>

	</body>
	<script src="js/mui.min.js "></script>
	<script src="js/mui.view.js "></script>
	<script>
		mui.init();
		//初始化单页view
		var viewApi = mui('#app').view({
			defaultPage: '#setting'
		});
		//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();
		var view = viewApi.view;
		(function($) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if(viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
			//监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
			//第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
			view.addEventListener('pageBeforeShow', function(e) {
				//				console.log(e.detail.page.id + ' beforeShow');
			});
			view.addEventListener('pageShow', function(e) {
				//				console.log(e.detail.page.id + ' show');
			});
			view.addEventListener('pageBeforeBack', function(e) {
				//				console.log(e.detail.page.id + ' beforeBack');
			});
			view.addEventListener('pageBack', function(e) {
				//				console.log(e.detail.page.id + ' back');
			});
		})(mui);

		mui.ready(function() {

		})
	</script>

</html>